<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>选择服务</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="flexible.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        .container{
            width: 100%;
            height: 100%;
            background: url("./images/new_bg.jpg");
            font-size:.4rem;
            color: #656464;
        }
        .product{
            width: 70%;
            height: 8rem;
            background: #fff;
            position: absolute;
            top:0;
            left:0;
            bottom: 0;
            right: 0;
            margin: auto;
            border-radius: 3px;
            padding:0 .5rem;
        }
        .product p{
            margin:.3rem 0;
        }
        .p_title{
            text-align: center;
            padding:.5rem 0;
        }
        .submit{
            text-align: center;
            margin-top:1rem;
        }
        .submit span{
            padding: .2rem .5rem;
            background: #EB5E19;
            color: #fff;
            display: inline-block;
            width: 3rem;
            border-radius: .1rem;

        }
        .product select{
            height: .7rem;
            max-width: 50%;
        }
        .product select option{
            max-width: 100%;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="product">
            <div class="p_title">请选择您的服务</div>
            <p>
                <label>手机类型：</label>
                <select name="" id="phone-type">
                    <option value="1">未选择</option>

                </select>
            </p>
            <p>
                <label>手机型号：</label>
                <select name="" id="phone-id">
                    <option value="1">未选择</option>

                </select>
            </p>
            <p>
                <label>维修类别：</label>
                <select name="" id="phone-option">
                    <option value="1">未选择</option>

                </select>
            </p>
            <p>
                <label>价格：</label><span id="phone-price">0</span><span>元</span>
            </p>
            <div class="submit">
                <a href="tel:400-1893-1999">欢迎咨询</a>
            </div>
        </div>
    </div>
</body>
<script src="jquery-1.9.1.min.js"></script>
<script>
    $(function(){

        //创建select option选项
        function createOption(id,arr){
            for(var i=0;i<arr.length;i++){
                $('#'+id).append("<option value="+arr[i]["id"]+">"+arr[i]["text"]+"</option>");
            }
        }

        //获取手机类型
        function getPhoneType() {
            $.post('http://www.chaojixueba.com/Springmvc/price/getPhoneType',function (data) {
                if (typeof data === 'string') {
                    data = JSON.parse(data);
                }
                createOption('phone-type',data);
            })
        }
        //获取手机型号
        function getPhoneId(pId) {
            $.post('http://www.chaojixueba.com/Springmvc/price/getPhoneDetailType',{
                'dictId':pId
            },function (data) {
                if (typeof data === 'string') {
                    data = JSON.parse(data);
                }
                createOption('phone-id',data);
            })
        }
        //获取手机维修选项
        function getPhoneOption(dType) {
            $.post('http://www.chaojixueba.com/Springmvc/price/getPhoneDetailType',{
                'dictId':dType
            },function (data) {
                if (typeof data === 'string') {
                    data = JSON.parse(data);
                }
                createOption('phone-option',data);
            })
        }
        //获取价格
        function getPhonePrice(pId,dType,rType) {
            $.post('http://www.chaojixueba.com/Springmvc/price/queryPhonePrice',{
                'phoneTypeId':pId,
                'detailTypeCode':dType,
                'repairTypeCode':rType
            },function (data) {
                if (typeof data === 'string') {
                    data = JSON.parse(data);
                }
                $('#phone-price').html(data.price)
            })
        }
        var pId,dType;

        $('#phone-type').change(function () {
            pId = $(this).val();
            getPhoneId(pId);
        })
        $('#phone-id').change(function () {
            dType = $(this).val();
            getPhoneOption(dType);
        })
        $('#phone-option').change(function () {
            var rType = $(this).val();
            getPhonePrice(pId,dType,rType);
        })

        getPhoneType();

    })
</script>
</html>